<template>
  <div class="message">
    <a-table :columns="columns" :data-source="data" bordered :rowKey="record=>record.id">
      <span slot="action" slot-scope="text, record">
        <a-switch default-checked @change="onChange(record)" v-model="record.status" />
      </span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: "昵称",
    dataIndex: "nickName",
    ellipsis: true,
    align: "center",
  },
  {
    title: "留言内容",
    dataIndex: "content",
    align: "center",
  },
  {
    title: "邮箱",
    dataIndex: "email",
    align: "center",
  },
  {
    title: "留言时间",
    dataIndex: "addTime",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "action" },
    align: "center",
  },
];
export default {
  data() {
    return {
      data: [],
      columns,
    };
  },
  created() {
    this.getMessageList();
  },
  methods: {
    async getMessageList() {
      let res = await this.$http.get("/admin/getMessageList");
      this.data = res.data.data;
    },
    async onChange(item) {
      let { id, status } = item;
      let { data: res } = await this.$http.post("/admin/updateMessageStatus", {
        id,
        status,
      });
      if (res.data.status == 200) {
        this.$message.success(res.data.msg);
        this.getMessageList();
      }
    },
  },
};
</script>

<style lang="less">
.message {
  .ant-table-wrapper {
    .ant-spin-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>